<script setup>
import {onMounted, ref, watch} from "vue";
import api from './api.js'

  const deviceList = ref([]);

  async function getList() {
    const res = await api.getList();
    deviceList.value = res.data;
  }

  onMounted(()=> {
    getList();
  })

const socket = new WebSocket(`ws://localhost:2883`);
socket.onopen = () => {
  console.log(`Websocket连接已建立`);
}

socket.onmessage = function(event) {
  console.log('收到消息:', event.data);
};

socket.onclose = () => {
  console.log(`Websocket连接已关闭`);
}

</script>

<template>
  <div class="device-container">
    <div class="device" v-for="device in deviceList">
      <div class="device-header">
        <div class="title">
          <span class="breath-light" :class="{'active': device.running}"></span> {{device.name}}
        </div>
        <div class="toolbar">
          <button v-if="device.running" @click="shutdown(device)">关闭</button>
          <button v-else @click="start(device)">启动</button>
          <button v-if="device.running" @click="del(device)">删除</button>
        </div>
      </div>
      <div class="message-container">
        <div v-for="(message, index) in device.messageList" :key="index">
          <div class="message-header">{{ message.from }}</div>
          <div class="comment_bubble">{{ message }}</div>
        </div>
      </div>
      <div id="chat-input">
        <textarea v-model="device.messageNew"></textarea>
        <button @click="sendMessage(device)">发送</button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.device-container {
  display: flex;
  flex-direction: row;
}

.device {

  height: 400px;
  width: 30%;
  border: 1px solid #ccc;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-right: 20px;

  .device-header {
    border-bottom: 1px solid #ccc;

    display: flex;
    padding: 3px 10px;
    .title {
      flex-grow: 1;
    }
    .breath-light {
      border-radius: 50%;
      width: 10px;
      height: 10px;
      display: inline-block;
      line-height: 20px;
      margin-right: 10px;
      background-color: #ccc;
      &.active {
        background-color: #00dd00;
        animation: breathe 3s linear infinite;
      }
    }
    .toolbar {
      button {
        margin-right: 5px;
      }
    }
  }

  .message-container {
    list-style: none;
    margin: 0;
    padding: 10px;
    height: 100%;
    overflow-y: auto;
    .comment_bubble {
      width: max-content;
      height: auto;
      background: #cfffcc;
      position: relative;
      border-radius: 5px;
      padding: 2px 10px;
      max-width: 200px;
    }

  }

}

@keyframes breathe {
  0%{
    transform: scale(1);
    box-shadow: 0 0 2px #00dd00;
  }
  50%{
    transform: scale(1.5);
    box-shadow: 0 0 10px #00dd00;
  }
  100%{
    transform: scale(1);
    box-shadow: 0 0 2px #00dd00;
  }
}


#chat-log li {
  margin-bottom: 10px;
  padding: 5px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  /* max-width: 80%; */
  align-items: flex-end;
}

.received {
  /* align-self: flex-end; */
  align-items: flex-start !important;
  background-color: #f5f5f5;
}

.message-header {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
}

.message-body {
  font-size: 16px;
  line-height: 1.5;
}

#chat-input {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #f5f5f5;
}

#chat-input textarea {
  flex: 1;
  margin-right: 10px;
  border-radius: 5px;
  padding: 5px;
  font-size: 16px;
  border: 1px solid #ccc;
}
</style>